<template>
<!-- 侵权 -->
  <div class="container-box">
    <div class="menu1css">
      <el-button size="small" type="primary" @click="dialogFormVisible = true">新增侵权单</el-button>
      <el-button size="small" type="primary">下载说明文档</el-button>
    </div>
    <el-dialog title="侵权单" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form :model="form" label-width="100px">
        <el-form-item label="员工id:">
          <el-input placeholder="请输入员工id" style="width:300px;" v-model="form.staff"/>
        </el-form-item>
        <el-form-item label="店铺id:">
          <el-input placeholder="请输入店铺id" style="width:300px;" v-model="form.store"></el-input>
        </el-form-item>
        <el-form-item label="侵权内容:">
          <el-input placeholder="请输入侵权内容" style="width:300px;" v-model="form.tort_content"></el-input>
        </el-form-item>
        <el-form-item label="侵权公司:">
          <el-input placeholder="请输入侵权公司" style="width:300px;" v-model="form.tort_company"></el-input>
        </el-form-item>
        <el-form-item label="侵权ASIN:">
          <el-input placeholder="请输入侵权ASIN" style="width:300px;" v-model="form.tort_asin"></el-input>
        </el-form-item>
        <el-form-item label="原ASIN:">
          <el-input placeholder="请输入原ASIN" style="width:300px;" v-model="form.old_asin"></el-input>
        </el-form-item>
        <el-form-item label="侵权图片地址:">
          <el-input placeholder="请输入侵权图片地址" style="width:300px;" v-model="form.tort_image_url"></el-input>
        </el-form-item>
        <el-form-item>  
          <el-button type="primary" @click="tortadd">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="menucss">
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :before-remove="beforeRemove"
        >
        <el-button size="small" type="primary">批量上传数据</el-button>
      </el-upload>
    </div>
    <el-table
      :header-cell-style="tableHeaderColor"
      :data="tableData"
      size="mini"
      border
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        align="center"
        :selectable='selectInit'>
      </el-table-column>
      <el-table-column prop="staff" label="上传侵权物品员工id" width="130"></el-table-column>
      <el-table-column prop="tort_content" label="侵权物品描述" width="160"></el-table-column>
      <el-table-column prop="tort_company_ip" label="侵权公司ip" width="150"></el-table-column>
      <el-table-column prop="tort_asin" label="侵权ASIN" width="150"></el-table-column>
      <el-table-column prop="old_asin" label="侵权原ASIN" width="150"></el-table-column>
      <el-table-column prop="tort_image_url" label="侵权图片地址" width="200"></el-table-column>
      <el-table-column prop="deal_with_tort" label="侵权物品处理" width="130"></el-table-column>
      <el-table-column width="" label="操作">
        <el-button type="info" size="mini" @click="ondetails">详情</el-button>
        <el-button type="primary" size="mini">修改</el-button>
        <el-button type="danger" size="mini" @click="ondelete">删除</el-button>
      </el-table-column>
    </el-table>
    <pagination
      @sendPageSize="receivePageSize"
      @sendCurrentPage="receiveCurrentPage"
      :totalPage="totalPage"
    ></pagination>
  </div>
</template>
<script>
import pagination from "common/pagination";
import axios from "axios";
import html from "../../api/src"
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form:{
        staff: '',
        store: '',
        tort_content: '',
        tort_company: '',
        tort_asin: '',
        old_asin: '',
        tort_image_url: ''
      },
      totalPage: 300,
      tableData: [],
      DateValue: "",
    };
  },
  //获取侵权列表
  created(){
    axios({
      method: "get",
      url: html.domain + 'torts/tortlist/',
    })
    .then((res)=>{
      let id,
      staff,
      tort_content,
      tort_company_ip,
      tort_asin,
      old_asin,
      tort_image_url,
      deal_with_tort;
      this.totalPage = res.data.count;
      for (let i = 0; i < res.data.results.length; i++) {
        id = res.data.results[i].id;
        staff = res.data.results[i].staff;
        tort_content = res.data.results[i].tort_content;
        tort_company_ip = res.data.results[i].tort_company_ip;
        tort_asin = res.data.results[i].tort_asin;
        old_asin = res.data.results[i].old_asin;
        tort_image_url = res.data.results[i].tort_image_url;
        deal_with_tort = res.data.results[i].deal_with_tort;
        this.tableData.push({
          id : id,
          staff : staff,
          tort_content : tort_content,
          tort_company_ip : tort_company_ip,
          tort_asin : tort_asin,
          old_asin : old_asin,
          tort_image_url : tort_image_url,
          deal_with_tort : deal_with_tort
        });
      }
    })
  },
  methods: {
    receivePageSize(val) {
      console.log(val);
    },
    receiveCurrentPage(val) {
      console.log(val);
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F7F6Fd;color: #B6B5C2;font-weight: 500;";
      }
    },
    // 删除上传文件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    // 详情
    ondetails(){
      this.$router.push( {path:'details'}) 
    },
    // 删除
    ondelete(){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        }
      );
    },
    //关闭弹窗
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
      .catch(_ => {});
    },
    //新增侵权表单
    tortadd(){
      axios({
        method: "post",
        url: html.domain + 'torts/tortadd/',
        data:{
          staff: this.form.staff,
          store: this.form.store,
          tort_content: this.form.tort_content,
          tort_company: this.form.tort_company,
          tort_asin: this.form.tort_asin,
          old_asin: this.form.old_asin,
          tort_image_url: this.form.tort_image_url
        }
      })
      .then((res)=>{
        console.log(res);
        created();
      })
    this.dialogFormVisible = false;
    },    
  },
  watch: {
    DateValue(newval, oldval) {
      console.log(newval);
      console.log(oldval);
    }
  },
  components: {
    pagination
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";
.container-box {
  .form-box {
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    .input-box {
      margin-bottom: 20px;
    }
    .input-label div {
      padding: 0px !important;
    }
    .input-label .label {
      margin-top: 4px;
    }
  }
  .button-box {
    margin: 50px;
  }
  .menucss{
    padding-left: 5px;
    width: 200px;
    padding: 5px 0 5px 5px;
  }
  .menu1css{
    float: right;
    padding: 5px 5px 5px 0;
  }
}
</style>